<template>
  <div :class="sideNavCls">
    <t-menu
      :class="menuCls"
      :theme="theme"
      :value="active"
      :collapsed="collapsed"
      :expand-mutex="settingStore.expandMutex"
      :default-expanded="defaultExpanded"
      :style="{ 'background-color': settingStore.menuBgColor }"
    >
      <template #logo>
        <span
          v-if="showLogo"
          class="lg-soar-side-nav-logo-wrapper"
          style="justify-content: start; margin-left: 24px"
          @click="goHome"
        >
          <img :src="logo" style="width: 23px" />
          <span v-if="!collapsed" style="padding-left: 12px; font-size: 26px">{{ appTitle }}</span>
        </span>
      </template>
      <menu-content :nav-data="menu" />
    </t-menu>
    <div :class="`lg-soar-side-nav-placeholder${collapsed ? '-hidden' : ''}`"></div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

import { useSettingStore } from '@/store';
import { appTitle } from '@/config/global';
import type { MenuRoute } from '@/types/interface';
import { getActive } from '@/router';

import logo from '@/assets/app/logo.png';
import MenuContent from './MenuContent.vue';
import { useWindowSizeFn } from '@/hooks';

const MIN_POINT = 992 - 1;

const props = defineProps({
  menu: {
    type: Array as PropType<MenuRoute[]>,
    default: () => [],
  },
  showLogo: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  isFixed: {
    type: Boolean as PropType<boolean>,
    default: true,
  },
  layout: {
    type: String as PropType<string>,
    default: '',
  },
  headerHeight: {
    type: String as PropType<string>,
    default: '64px',
  },
  theme: {
    type: String as PropType<'light' | 'dark'>,
    default: 'light',
  },
  isCompact: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
});

const collapsed = computed(() => useSettingStore().isSidebarCompact);

const active = computed(() => getActive());

const defaultExpanded = computed(() => {
  const path = getActive();
  const paths = path.split('/');
  const expandedList: string[] = [];
  let temp: any = '';
  for (let i = 1, len = paths.length - 1; i < len; i++) {
    temp += `/${paths[i]}`;
    expandedList.push(temp);
  }
  return expandedList;
});

const sideNavCls = computed(() => {
  const { isCompact } = props;
  return [
    `lg-soar-sidebar-layout`,
    {
      [`lg-soar-sidebar-compact`]: isCompact,
    },
  ];
});

const menuCls = computed(() => {
  const { showLogo, isFixed, layout } = props;
  return [
    `lg-soar-side-nav`,
    {
      [`lg-soar-side-nav-no-logo`]: !showLogo,
      [`lg-soar-side-nav-no-fixed`]: !isFixed,
      [`lg-soar-side-nav-mix-fixed`]: layout === 'mix' && isFixed,
    },
  ];
});

const router = useRouter();
const settingStore = useSettingStore();

useWindowSizeFn(() => {
  const isCompact = window.innerWidth <= MIN_POINT;
  settingStore.updateConfig({
    isSidebarCompact: isCompact,
  });
});

const goHome = () => {
  router.push(import.meta.env.VITE_HOME_PATH);
};
</script>
